<template>
  <div class="sql-audit-container">

    <!-- 星空背景 -->
    <div class="starry-background">
      <div class="stars"></div>
      <div class="stars2"></div>
      <div class="stars3"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="audit-content">
      <!-- 页面标题 -->
      <div class="page-header glass-effect">
        <div class="header-content">
          <div class="title-section">
            <h1 class="page-title">
              <i class="fa fa-database"></i>
              SQL日志审计
            </h1>
            <p class="page-subtitle">数据库操作记录审计，确保数据安全</p>
          </div>
          <div class="stats-section">
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.total_queries || 0 }}</div>
              <div class="stat-label">总查询数</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.risk_queries || 0 }}</div>
              <div class="stat-label">风险查询</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.slow_queries || 0 }}</div>
              <div class="stat-label">慢查询</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 开发中提示 -->
      <div class="development-notice glass-effect">
        <div class="notice-content">
          <div class="notice-icon">
            <i class="fa fa-shield"></i>
          </div>
          <div class="notice-text">
            <h3>功能开发中</h3>
            <p>SQL日志审计功能正在开发中，将为您提供全面的数据库安全监控！</p>
            <div class="feature-list">
              <div class="feature-item">
                <i class="fa fa-check"></i>
                <span>SQL语句记录与分析</span>
              </div>
              <div class="feature-item">
                <i class="fa fa-check"></i>
                <span>危险操作检测</span>
              </div>
              <div class="feature-item">
                <i class="fa fa-check"></i>
                <span>性能监控与优化建议</span>
              </div>
              <div class="feature-item">
                <i class="fa fa-check"></i>
                <span>用户权限审计</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 安全等级提示 -->
      <div class="security-levels glass-effect">
        <div class="section-title">
          <i class="fa fa-exclamation-triangle"></i>
          安全等级说明
        </div>
        <div class="levels-grid">
          <div class="level-card safe">
            <div class="level-icon">
              <i class="fa fa-check-circle"></i>
            </div>
            <div class="level-content">
              <h4>安全查询</h4>
              <p>SELECT、SHOW等只读操作</p>
            </div>
          </div>

          <div class="level-card warning">
            <div class="level-icon">
              <i class="fa fa-exclamation-circle"></i>
            </div>
            <div class="level-content">
              <h4>警告查询</h4>
              <p>UPDATE、INSERT等修改操作</p>
            </div>
          </div>

          <div class="level-card danger">
            <div class="level-icon">
              <i class="fa fa-times-circle"></i>
            </div>
            <div class="level-content">
              <h4>危险查询</h4>
              <p>DROP、DELETE、TRUNCATE等高危操作</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 预览功能卡片 -->
      <div class="preview-section">
        <div class="section-title">
          <i class="fa fa-eye"></i>
          功能预览
        </div>
        <div class="preview-grid">
          <div class="preview-card glass-effect">
            <div class="preview-icon">
              <i class="fa fa-search"></i>
            </div>
            <div class="preview-content">
              <h4>SQL语句分析</h4>
              <p>记录并分析所有SQL语句，识别潜在的安全风险和性能问题</p>
            </div>
          </div>

          <div class="preview-card glass-effect">
            <div class="preview-icon">
              <i class="fa fa-user-shield"></i>
            </div>
            <div class="preview-content">
              <h4>用户行为监控</h4>
              <p>跟踪用户数据库操作行为，建立用户操作画像和异常检测</p>
            </div>
          </div>

          <div class="preview-card glass-effect">
            <div class="preview-icon">
              <i class="fa fa-chart-bar"></i>
            </div>
            <div class="preview-content">
              <h4>性能统计</h4>
              <p>统计查询执行时间、频率，提供数据库性能优化建议</p>
            </div>
          </div>

          <div class="preview-card glass-effect">
            <div class="preview-icon">
              <i class="fa fa-bell"></i>
            </div>
            <div class="preview-content">
              <h4>实时告警</h4>
              <p>检测到危险操作时实时告警，支持邮件、短信等多种通知方式</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 返回按钮 -->
      <div class="action-section">
        <el-button @click="goToHistory" class="glass-button primary" size="large">
          <i class="fa fa-arrow-left"></i>
          返回历史记录
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 统计数据
const statistics = ref({
  total_queries: 0,
  risk_queries: 0,
  slow_queries: 0
})

// 方法
const goToHistory = () => {
  router.push('/history')
}

// 模拟数据加载
const loadStatistics = () => {
  statistics.value = {
    total_queries: 2341,
    risk_queries: 5,
    slow_queries: 23
  }
}

onMounted(() => {
  loadStatistics()
})
</script>

<style lang="scss" scoped>
/* 主容器 */
.sql-audit-container {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(20, 20, 40, 0.95) 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
  overflow-x: hidden;
}



/* 星空背景 */
.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.stars, .stars2, .stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: zoom 20s infinite linear;
}

.stars2 {
  background-image:
    radial-gradient(1px 1px at 40px 60px, #fff, transparent),
    radial-gradient(1px 1px at 120px 10px, rgba(255,255,255,0.7), transparent);
  background-repeat: repeat;
  background-size: 300px 200px;
  animation: zoom 40s infinite linear;
}

.stars3 {
  background-image:
    radial-gradient(1px 1px at 10px 10px, rgba(255,255,255,0.5), transparent);
  background-repeat: repeat;
  background-size: 400px 300px;
  animation: zoom 60s infinite linear;
}

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

/* 主要内容区域 */
.audit-content {
  position: relative;
  z-index: 10;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 玻璃效果基础样式 */
.glass-effect {
  background: rgba(164, 244, 186, 0.1);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* 页面标题区域 */
.page-header {
  margin-bottom: 30px;
  padding: 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.title-section {
  flex: 1;
}

.page-title {
  color: #00eaff;
  font-size: 2.5em;
  margin: 0 0 10px 0;
  text-shadow: 0 0 20px rgba(0, 234, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 15px;

  i {
    font-size: 0.8em;
  }
}

.page-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1em;
  margin: 0;
}

.stats-section {
  display: flex;
  gap: 20px;
}

.stat-card {
  padding: 20px;
  text-align: center;
  min-width: 120px;

  .stat-number {
    color: #00eaff;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 234, 255, 0.3);
  }

  .stat-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9em;
    margin-top: 5px;
  }
}

/* 开发中提示 */
.development-notice {
  margin-bottom: 30px;
  padding: 30px;
}

.notice-content {
  display: flex;
  align-items: center;
  gap: 25px;
}

.notice-icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: rgba(255, 107, 107, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  i {
    font-size: 32px;
    color: #ff6b6b;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
  }
}

.notice-text {
  flex: 1;

  h3 {
    color: #ff6b6b;
    font-size: 1.5em;
    margin: 0 0 10px 0;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
  }

  p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1em;
    margin: 0 0 20px 0;
  }
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.8);

  i {
    color: #a4f4ba;
    font-size: 14px;
  }

  span {
    font-size: 0.9em;
  }
}

/* 安全等级区域 */
.security-levels {
  margin-bottom: 30px;
  padding: 25px;
}

.section-title {
  color: #00eaff;
  font-size: 1.3em;
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(0, 234, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.levels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.level-card {
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid rgba(164, 244, 186, 0.1);
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    border-color: rgba(164, 244, 186, 0.3);
  }

  &.safe {
    border-left: 4px solid #a4f4ba;

    .level-icon {
      background: rgba(164, 244, 186, 0.2);
      color: #a4f4ba;
    }
  }

  &.warning {
    border-left: 4px solid #ffa726;

    .level-icon {
      background: rgba(255, 167, 38, 0.2);
      color: #ffa726;
    }
  }

  &.danger {
    border-left: 4px solid #ff6b6b;

    .level-icon {
      background: rgba(255, 107, 107, 0.2);
      color: #ff6b6b;
    }
  }
}

.level-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  i {
    font-size: 18px;
  }
}

.level-content {
  flex: 1;

  h4 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1em;
    margin: 0 0 5px 0;
  }

  p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9em;
    margin: 0;
  }
}

/* 预览功能区域 */
.preview-section {
  margin-bottom: 30px;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.preview-card {
  padding: 25px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(164, 244, 186, 0.4);
  }
}

.preview-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: rgba(0, 234, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;

  i {
    font-size: 20px;
    color: #00eaff;
    text-shadow: 0 0 10px rgba(0, 234, 255, 0.3);
  }
}

.preview-content {
  h4 {
    color: #00eaff;
    font-size: 1.1em;
    margin: 0 0 10px 0;
    text-shadow: 0 0 5px rgba(0, 234, 255, 0.3);
  }

  p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
    line-height: 1.4;
    margin: 0;
  }
}

/* 操作区域 */
.action-section {
  text-align: center;
  margin-top: 40px;
}

.glass-button {
  background: rgba(164, 244, 186, 0.8) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: white !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 6px !important;
  box-shadow:
    0 2px 8px rgba(164, 244, 186, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;

  &:hover {
    background: rgba(164, 244, 186, 1) !important;
    border-color: rgba(164, 244, 186, 0.5) !important;
    transform: translateY(-1px) !important;
    box-shadow:
      0 4px 12px rgba(164, 244, 186, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }

  &.primary {
    background: rgba(0, 234, 255, 0.8) !important;
    border-color: rgba(0, 234, 255, 0.3) !important;
    box-shadow:
      0 2px 8px rgba(0, 234, 255, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;

    &:hover {
      background: rgba(0, 234, 255, 1) !important;
      border-color: rgba(0, 234, 255, 0.5) !important;
      box-shadow:
        0 4px 12px rgba(0, 234, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .header-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .stats-section {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .notice-content {
    flex-direction: column;
    text-align: center;
  }

  .levels-grid,
  .preview-grid {
    grid-template-columns: 1fr;
  }

  .feature-list {
    grid-template-columns: 1fr;
  }
}
</style>
